<template>
    <div class="reportmian">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="数据筛选" name="1">
                <el-form :inline="true" class="divstyle" :model="selectfrom">
                    <el-form-item label="借款类型">
                        <el-select  placeholder="请选择借款类型" v-model="selectfrom.LoanType">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option :value="1" label="个人借款"></el-option>
                            <el-option :value="2" label="支付申请"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.Start"
                                type="date"
                                placeholder="开始时间"
                                value-format="yyyy-MM-dd"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.End"
                                type="date"
                                placeholder="结束时间"
                                value-format="yyyy-MM-dd"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-search" @click="formdata"></el-button>
                        <el-button type="success" icon="el-icon-printer" v-print="printObj">打印</el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="数据面板" name="2">
                <el-row>
                    <el-col align="center" style="font-size: 25px;font-weight: bold;">固远晨通科技发展有限公司个人借款汇总表</el-col>
                    <el-col>
                        <el-table  id="wrapperPersonLoanSumReport" :data="tableData"  border>
                            <el-table-column label="序号" align="center" show-overflow-tooltip type="index" width="50"></el-table-column>
                            <el-table-column label="部门" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ slot.row.DepartmentName }}
                                </template>
                            </el-table-column>
                            <el-table-column label="个人" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ slot.row.UserName  }}
                                </template>
                            </el-table-column>
                            <el-table-column label="期初金额" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ slot.row.openBalance  }}
                                </template>
                            </el-table-column>
                            <el-table-column label="借款金额" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ slot.row.loan  }}
                                </template>
                            </el-table-column>
                            <el-table-column label="冲账金额" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ slot.row.reversal   }}
                                </template>
                            </el-table-column>
                            <el-table-column label="期末余额" align="center" show-overflow-tooltip >
                                <template slot-scope="slot">
                                    {{ slot.row.closBalance   }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    export default {
        name: "PersonLoanSumReport",
        props:{
            AllDepartment:{
                type:Array,
                required:true
            },
        },
        data(){
            return{
                activeNames: ['1','2'],
                selectfrom:{
                    LoanType:0,
                    Start:'',
                    End:'',
                    Quit:false,
                },
                tableData:[],
                wrapper: {
                    width: "100%",
                    height: "100%",
                    margin: "auto",
                },
                printObj: {
                    id: "wrapperPersonLoanSumReport",  //打印标签的id
                    popTitle: '固远晨通科技发展有限公司个人借款汇总表',  //文件标题
                    extraCss: 'http://www.guyuanct.com/',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                },
            }
        },
        created() {
            this.InitDate();
            this.formdata()
        },
        methods: {
            InitDate() {
                const endDate = this.getFormatDate(new Date()).substr(0, 11)
                const beginDate = this.getFormatDate(new Date(new Date() - 3600 * 1000 * 24 * 30)).substr(0, 11)
                this.selectfrom.Start = beginDate;
                this.selectfrom.End = endDate;
            },
            // 获取当前时间
            getFormatDate(date) {
                var month = date.getMonth() + 1
                var strDate = date.getDate()
                if (month >= 1 && month <= 9) {
                    month = '0' + month
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = '0' + strDate
                }
             var currentDate = date.getFullYear() + '-' + month + '-' + strDate + '';
                return currentDate
            },
            // 初始数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Report/GetPersonLoanSumReportData',{
                    from:this.selectfrom
                }).then(res => {
                    loadding.close();
                    this.tableData = res.data
                })
            },
        },
    }
</script>

<style scoped>

</style>
